/**
 * 自定义节点组件定义
 * 参考VueFlow官方风格，支持动画效果和快捷添加功能
 */

import { Handle } from '@vue-flow/core'

/**
 * 事件节点组件（开始/结束节点）
 * 参考VueFlow官网风格，使用圆形设计
 */
export const EventNode = {
  template: `
    <div class="event-node" :class="[eventClass, { selected }]" :style="nodeStyle">
      <div class="event-content">
        <div class="event-icon" :style="iconStyle">{{ customIcon || eventIcon }}</div>
        <div class="event-label" :style="labelStyle">{{ nodeData.label }}</div>
      </div>
      <Handle
        v-if="eventType !== 'start'"
        type="target"
        position="top"
        class="custom-handle handle-top"
        :style="handleStyle"
        @click="onHandleClick('top')"
        @mousedown="onHandleMouseDown"
      />
      <Handle
        v-if="eventType !== 'end'"
        type="source"
        position="bottom"
        class="custom-handle handle-bottom"
        :style="handleStyle"
        @click="onHandleClick('bottom')"
        @mousedown="onHandleMouseDown"
      />
    </div>
  `,
  components: {
    Handle
  },
  props: ['id', 'data', 'selected'],
  computed: {
    nodeData() {
      return this.data || {}
    },
    eventType() {
      return this.nodeData.eventType || 'start'
    },
    eventClass() {
      return `event-${this.eventType}`
    },
    eventIcon() {
      switch (this.eventType) {
        case 'start': return '●'
        case 'end': return '●'
        default: return '●'
      }
    },
    nodeStyle() {
      const style = this.nodeData.nodeStyle || {}
      
      // 事件节点默认使用圆形设计
      let borderRadius = '50%' // 默认圆形
      let width = style.width ? `${style.width}px` : '80px'
      let height = style.height ? `${style.height}px` : '80px'
      
      if (style.shape === 'circle') {
        borderRadius = '50%'
        // 确保圆形时宽高相等
        if (width && height) {
          const size = Math.min(parseInt(width), parseInt(height))
          width = `${size}px`
          height = `${size}px`
        } else if (width) {
          height = width
        } else if (height) {
          width = height
        } else {
          // 默认圆形大小
          width = '80px'
          height = '80px'
        }
      }
      
      return {
        backgroundColor: style.backgroundColor,
        height: height,
        width: width,
        borderColor: style.borderColor,
        borderWidth: style.borderWidth ? `${style.borderWidth}px` : undefined,
        borderStyle: style.borderStyle,
        borderRadius: borderRadius,
      }
    },
    labelStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor || '#333',
        fontSize: style.fontSize ? `${style.fontSize}px` : '12px',
      }
    },
    iconStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor || '#333',
        fontSize: style.fontSize ? `${style.fontSize}px` : '16px',
      }
    },
    customIcon() {
      const style = this.nodeData.nodeStyle || {}
      return style.icon || null
    },
    handleStyle() {
      return {
        width: '20px',
        height: '12px',
        borderRadius: '6px',
        border: '2px solid #fff',
        background: '#b1b1b7',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 0.2s ease',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    onHandleClick(position) {
      this.$emit('handle-click', { nodeId: this.id, position })
    },
    onHandleMouseDown(event) {
      event.stopPropagation()
    }
  }
}

/**
 * 网关节点组件
 * 参考VueFlow官网风格，使用正方形设计
 */
export const GatewayNode = {
  template: `
    <div class="gateway-node" :class="[gatewayClass, { selected }]" :style="nodeStyle">
      <div class="gateway-content">
        <div class="gateway-icon" :style="iconStyle">{{ customIcon || gatewayIcon }}</div>
        <div class="gateway-label" :style="labelStyle">{{ nodeData.label }}</div>
      </div>
      <Handle
        type="target"
        position="top"
        class="custom-handle handle-top"
        :style="handleStyle"
        @click="onHandleClick('top')"
        @mousedown="onHandleMouseDown"
      />
      <Handle
        type="source"
        position="bottom"
        class="custom-handle handle-bottom"
        :style="handleStyle"
        @click="onHandleClick('bottom')"
        @mousedown="onHandleMouseDown"
      />
    </div>
  `,
  components: {
    Handle
  },
  props: ['id', 'data', 'selected'],
  computed: {
    nodeData() {
      return this.data || {}
    },
    gatewayType() {
      return this.nodeData.gatewayType || 'exclusive'
    },
    gatewayClass() {
      return `gateway-${this.gatewayType}`
    },
    gatewayIcon() {
      switch (this.gatewayType) {
        case 'exclusive': return '◇'
        case 'parallel': return '◇'
        case 'event': return '◇'
        default: return '◇'
      }
    },
    nodeStyle() {
      const style = this.nodeData.nodeStyle || {}
      
      // 网关节点使用正方形，移除菱形相关代码
      let borderRadius = '0px' // 默认正方形
      let width = style.width ? `${style.width}px` : '80px'
      let height = style.height ? `${style.height}px` : '80px'
      
      // 支持圆角矩形
      if (style.shape === 'circle') {
        borderRadius = '50%'
        // 确保圆形时宽高相等
        if (width && height) {
          const size = Math.min(parseInt(width), parseInt(height))
          width = `${size}px`
          height = `${size}px`
        } else if (width) {
          height = width
        } else if (height) {
          width = height
        } else {
          // 默认圆形大小
          width = '80px'
          height = '80px'
        }
      }
      
      return {
        backgroundColor: style.backgroundColor,
        height: height,
        width: width,
        borderColor: style.borderColor || '#faad14',
        borderWidth: style.borderWidth ? `${style.borderWidth}px` : '3px',
        borderStyle: style.borderStyle || 'solid',
        borderRadius: borderRadius,
        minWidth: '80px',
        minHeight: '80px',
      }
    },
    labelStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor || '#333',
        fontSize: style.fontSize ? `${style.fontSize}px` : '12px',
      }
    },
    iconStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor || '#333',
        fontSize: style.fontSize ? `${style.fontSize}px` : '16px',
      }
    },
    customIcon() {
      const style = this.nodeData.nodeStyle || {}
      return style.icon || null
    },
    handleStyle() {
      return {
        width: '20px',
        height: '12px',
        borderRadius: '6px',
        border: '2px solid #fff',
        background: '#b1b1b7',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 0.2s ease',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    onHandleClick(position) {
      this.$emit('handle-click', { nodeId: this.id, position })
    },
    onHandleMouseDown(event) {
      event.stopPropagation()
    }
  }
}

/**
 * 任务节点组件
 * 参考VueFlow官网风格，使用圆角矩形设计
 */
export const TaskNode = {
  template: `
    <div class="task-node" :class="[taskClass, { selected }]" :style="nodeStyle">
      <div class="task-content">
        <div class="task-icon" :style="iconStyle">{{ customIcon || taskIcon }}</div>
        <div class="task-label" :style="labelStyle">{{ nodeData.label }}</div>
      </div>
      <Handle
        type="target"
        position="top"
        class="custom-handle handle-top"
        :style="handleStyle"
        @click="onHandleClick('top')"
        @mousedown="onHandleMouseDown"
      />
      <Handle
        type="source"
        position="bottom"
        class="custom-handle handle-bottom"
        :style="handleStyle"
        @click="onHandleClick('bottom')"
        @mousedown="onHandleMouseDown"
      />
    </div>
  `,
  components: {
    Handle
  },
  props: ['id', 'data', 'selected'],
  computed: {
    nodeData() {
      return this.data || {}
    },
    taskType() {
      return this.nodeData.taskType || 'task'
    },
    taskClass() {
      return `task-${this.taskType}`
    },
    taskIcon() {
      switch (this.taskType) {
        case 'task': return '⚙'
        case 'service': return '🔧'
        case 'script': return '📝'
        default: return '⚙'
      }
    },
    nodeStyle() {
      const style = this.nodeData.nodeStyle || {}
      
      // 根据shape属性设置border-radius和宽高
      let borderRadius = '8px' // 默认圆角矩形
      let width = style.width ? `${style.width}px` : undefined
      let height = style.height ? `${style.height}px` : undefined
      
      if (style.shape === 'circle') {
        borderRadius = '50%'
        // 确保圆形时宽高相等
        if (width && height) {
          const size = Math.min(parseInt(width), parseInt(height))
          width = `${size}px`
          height = `${size}px`
        } else if (width) {
          height = width
        } else if (height) {
          width = height
        } else {
          // 默认圆形大小
          width = '80px'
          height = '80px'
        }
      }
      
      return {
        backgroundColor: style.backgroundColor,
        height: height,
        width: width,
        borderColor: style.borderColor,
        borderWidth: style.borderWidth ? `${style.borderWidth}px` : undefined,
        borderStyle: style.borderStyle,
        borderRadius: borderRadius,
      }
    },
    labelStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    iconStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    customIcon() {
      const style = this.nodeData.nodeStyle || {}
      return style.icon || null
    },
    handleStyle() {
      return {
        width: '20px',
        height: '12px',
        borderRadius: '6px',
        border: '2px solid #fff',
        background: '#b1b1b7',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 0.2s ease',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    onHandleClick(position) {
      this.$emit('handle-click', { nodeId: this.id, position })
    },
    onHandleMouseDown(event) {
      event.stopPropagation()
    }
  }
}

/**
 * 用户任务节点组件
 * 参考VueFlow官网风格，使用圆角矩形设计
 */
export const UserTaskNode = {
  template: `
    <div class="user-task-node" :class="{ selected }" :style="nodeStyle">
      <div class="user-task-content">
        <div class="user-task-icon" :style="iconStyle">{{ customIcon || '👤' }}</div>
        <div class="user-task-label" :style="labelStyle">{{ nodeData.label }}</div>
      </div>
      <Handle
        type="target"
        position="top"
        class="custom-handle handle-top"
        :style="handleStyle"
        @click="onHandleClick('top')"
        @mousedown="onHandleMouseDown"
      />
      <Handle
        type="source"
        position="bottom"
        class="custom-handle handle-bottom"
        :style="handleStyle"
        @click="onHandleClick('bottom')"
        @mousedown="onHandleMouseDown"
      />
    </div>
  `,
  components: {
    Handle
  },
  props: ['id', 'data', 'selected'],
  computed: {
    nodeData() {
      return this.data || {}
    },
    nodeStyle() {
      const style = this.nodeData.nodeStyle || {}
      
      // 根据shape属性设置border-radius和宽高
      let borderRadius = '8px' // 默认圆角矩形
      let width = style.width ? `${style.width}px` : undefined
      let height = style.height ? `${style.height}px` : undefined
      
      if (style.shape === 'circle') {
        borderRadius = '50%'
        // 确保圆形时宽高相等
        if (width && height) {
          const size = Math.min(parseInt(width), parseInt(height))
          width = `${size}px`
          height = `${size}px`
        } else if (width) {
          height = width
        } else if (height) {
          width = height
        } else {
          // 默认圆形大小
          width = '80px'
          height = '80px'
        }
      }
      
      return {
        backgroundColor: style.backgroundColor,
        height: height,
        width: width,
        borderColor: style.borderColor,
        borderWidth: style.borderWidth ? `${style.borderWidth}px` : undefined,
        borderStyle: style.borderStyle,
        borderRadius: borderRadius,
      }
    },
    labelStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    iconStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    customIcon() {
      const style = this.nodeData.nodeStyle || {}
      return style.icon || null
    },
    handleStyle() {
      return {
        width: '20px',
        height: '12px',
        borderRadius: '6px',
        border: '2px solid #fff',
        background: '#b1b1b7',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 0.2s ease',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    onHandleClick(position) {
      this.$emit('handle-click', { nodeId: this.id, position })
    },
    onHandleMouseDown(event) {
      event.stopPropagation()
    }
  }
}

/**
 * 抄送节点组件
 * 参考VueFlow官网风格，使用圆角矩形设计
 */
export const CcNode = {
  template: `
    <div class="cc-node" :class="{ selected }" :style="nodeStyle">
      <div class="cc-content">
        <div class="cc-icon" :style="iconStyle">{{ customIcon || '📋' }}</div>
        <div class="cc-label" :style="labelStyle">{{ nodeData.label }}</div>
      </div>
      <Handle
        type="target"
        position="top"
        class="custom-handle handle-top"
        :style="handleStyle"
        @click="onHandleClick('top')"
        @mousedown="onHandleMouseDown"
      />
      <Handle
        type="source"
        position="bottom"
        class="custom-handle handle-bottom"
        :style="handleStyle"
        @click="onHandleClick('bottom')"
        @mousedown="onHandleMouseDown"
      />
    </div>
  `,
  components: {
    Handle
  },
  props: ['id', 'data', 'selected'],
  computed: {
    nodeData() {
      return this.data || {}
    },
    nodeStyle() {
      const style = this.nodeData.nodeStyle || {}
      
      // 根据shape属性设置border-radius和宽高
      let borderRadius = '8px' // 默认圆角矩形
      let width = style.width ? `${style.width}px` : undefined
      let height = style.height ? `${style.height}px` : undefined
      
      if (style.shape === 'circle') {
        borderRadius = '50%'
        // 确保圆形时宽高相等
        if (width && height) {
          const size = Math.min(parseInt(width), parseInt(height))
          width = `${size}px`
          height = `${size}px`
        } else if (width) {
          height = width
        } else if (height) {
          width = height
        } else {
          // 默认圆形大小
          width = '80px'
          height = '80px'
        }
      }
      
      return {
        backgroundColor: style.backgroundColor,
        height: height,
        width: width,
        borderColor: style.borderColor,
        borderWidth: style.borderWidth ? `${style.borderWidth}px` : undefined,
        borderStyle: style.borderStyle,
        borderRadius: borderRadius,
      }
    },
    labelStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    iconStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    customIcon() {
      const style = this.nodeData.nodeStyle || {}
      return style.icon || null
    },
    handleStyle() {
      return {
        width: '20px',
        height: '12px',
        borderRadius: '6px',
        border: '2px solid #fff',
        background: '#b1b1b7',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 0.2s ease',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    onHandleClick(position) {
      this.$emit('handle-click', { nodeId: this.id, position })
    },
    onHandleMouseDown(event) {
      event.stopPropagation()
    }
  }
}

/**
 * 子流程节点组件
 * 参考VueFlow官网风格，使用圆角矩形设计
 */
export const SubProcessNode = {
  template: `
    <div class="sub-process-node" :class="{ selected }" :style="nodeStyle">
      <div class="sub-process-content">
        <div class="sub-process-icon" :style="iconStyle">{{ customIcon || '📁' }}</div>
        <div class="sub-process-label" :style="labelStyle">{{ nodeData.label }}</div>
      </div>
      <Handle
        type="target"
        position="top"
        class="custom-handle handle-top"
        :style="handleStyle"
        @click="onHandleClick('top')"
        @mousedown="onHandleMouseDown"
      />
      <Handle
        type="source"
        position="bottom"
        class="custom-handle handle-bottom"
        :style="handleStyle"
        @click="onHandleClick('bottom')"
        @mousedown="onHandleMouseDown"
      />
    </div>
  `,
  components: {
    Handle
  },
  props: ['id', 'data', 'selected'],
  computed: {
    nodeData() {
      return this.data || {}
    },
    nodeStyle() {
      const style = this.nodeData.nodeStyle || {}
      
      // 根据shape属性设置border-radius和宽高
      let borderRadius = '8px' // 默认圆角矩形
      let width = style.width ? `${style.width}px` : undefined
      let height = style.height ? `${style.height}px` : undefined
      
      if (style.shape === 'circle') {
        borderRadius = '50%'
        // 确保圆形时宽高相等
        if (width && height) {
          const size = Math.min(parseInt(width), parseInt(height))
          width = `${size}px`
          height = `${size}px`
        } else if (width) {
          height = width
        } else if (height) {
          width = height
        } else {
          // 默认圆形大小
          width = '80px'
          height = '80px'
        }
      }
      
      return {
        backgroundColor: style.backgroundColor,
        height: height,
        width: width,
        borderColor: style.borderColor,
        borderWidth: style.borderWidth ? `${style.borderWidth}px` : undefined,
        borderStyle: style.borderStyle,
        borderRadius: borderRadius,
      }
    },
    labelStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    iconStyle() {
      const style = this.nodeData.nodeStyle || {}
      return {
        color: style.fontColor,
        fontSize: style.fontSize ? `${style.fontSize}px` : undefined,
      }
    },
    customIcon() {
      const style = this.nodeData.nodeStyle || {}
      return style.icon || null
    },
    handleStyle() {
      return {
        width: '20px',
        height: '12px',
        borderRadius: '6px',
        border: '2px solid #fff',
        background: '#b1b1b7',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 0.2s ease',
        cursor: 'pointer'
      }
    }
  },
  methods: {
    onHandleClick(position) {
      this.$emit('handle-click', { nodeId: this.id, position })
    },
    onHandleMouseDown(event) {
      event.stopPropagation()
    }
  }
}

/**
 * 注册所有自定义节点类型
 */
export const customNodeTypes = {
  gateway: GatewayNode,
  event: EventNode,
  task: TaskNode,
  userTask: UserTaskNode,
  cc: CcNode,
  subProcess: SubProcessNode
}